<template>
	<view class="content unify-padding">
		<view class="item" v-for="(item,index) in form" :key="index">
			<view class="item-form unify-flex" v-if="item.name">
				<view class="item-form-name unify-weight">{{item.name}}</view>
				<view class="item-form-right unify-relative">
					<view class="input-view" v-if="index !== 4">
						<input class="item-input" type="text" :value="item.value" :disabled="item.disabled || false"
							:placeholder="item.placeholder" @input="getInput($event, index)" />
					</view>
					<view class="item-form-label unify-flex unify-absolute" v-else>
						<view class="label-item" :class="[item.isLabel == index2? 'bk-' + themeColor.name: '']"
							v-for="(item2,index2) in item.array" :key="index2" @tap="tapLabel(index, index2)">
							{{item2}}
						</view>
					</view>
				</view>
			</view>
			<view class="sex-select unify-flex" v-else>
				<view class="sex-select-item" v-for="(item2,index2) in item.array" :key="index2"
					@tap="tapSelectSex(index, index2)">
					<view class="iconfont"
						:class="[item.isSex === index2? 'el-icon-moren_xuanzhong tf-' + themeColor.name: 'el-icon-morenxuanzhong']">
						<text class="sex-select-name">{{item2}}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 间隔 -->
		<uni-interval height="40px"></uni-interval>

		<!-- 底部按钮 -->
		<view class="" v-if="show">
			<uni-base-unify-btn :fixed="false" title="修改" @click="tapUpdate" ></uni-base-unify-btn>
		</view>
		<view class="" v-else>
			<uni-base-unify-btn :fixed="false" title="保存" @click="tapSave" ></uni-base-unify-btn>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: this.$mConstDataConfig.userOperationMenu[1].form,
				addressDetail: null,
				show:false
			}
		},
		onLoad(options) {
			this.form = this.$mConstDataConfig.userOperationMenu[1].form
			const that=this;
			if(JSON.stringify(this.$parseURL(options)) !== '{}'){
				// console.log("数据不为空进来了")
				this.show=true
				this.addressDetail = this.$parseURL(options)
				
				if(JSON.stringify(that.addressDetail) !== '{}'){
					// console.log("给表单赋值我进来了")
					that.form[0].value = that.addressDetail.data.detail //收货地址
					that.form[1].value = that.addressDetail.data.consignee //联系人
					that.form[2].isSex = that.addressDetail.data.sex //0表示女 1 表示男
					that.form[3].value = that.addressDetail.data.phone //手机号
					that.form[4].isLabel = that.addressDetail.data.label
				}
				
			}else{
				// console.log("数据为空进来了")
				this.form = this.$mConstDataConfig.userOperationMenu[1].form
				that.form[0].value = null //收货地址
				that.form[1].value = null //联系人
				that.form[2].isSex = null //0表示女 1 表示男
				that.form[3].value = null//手机号
				that.form[4].isLabel = null
			}
		},
		onReady(){
		}
		,
		methods: {
			getInput(e, index) {
				this.form[index].value = e.detail.value;
			},

			// 选择性别
			tapSelectSex(index, index2) {
				this.form[index].isSex = index2;
			},

			// 选择标签
			tapLabel(index, index2) {
				if (this.form[index].isLabel == index2) {
					this.form[index].isLabel = undefined;
				} else {
					this.form[index].isLabel = index2;
				}
			},

			// 保存
			tapSave() {
				let params = {
					detail: this.form[0].value, //收货地址
					consignee: this.form[1].value, //联系人
					sex: this.form[2].isSex, //0表示女 1 表示男
					phone: this.form[3].value, //手机号
					label: this.form[4].isLabel, //标签
				}
				this.$https({
					url: "/address/add",
					method: "post",
					data: params,
					success: () => {
						this.form = this.$mConstDataConfig.userOperationMenu[1].form
						this.$openPage('userShippingAddressList')
					}
				})
			},
			//去修改逻辑
			tapUpdate(){
				let params = {
					id:this.addressDetail.data.id ,//地址id
					userId:this.addressDetail.data.userId,//用户id 
					isDefault:this.addressDetail.data.isDefault,
					detail: this.form[0].value, //收货地址
					consignee: this.form[1].value, //联系人
					sex: this.form[2].isSex, //0表示女 1 表示男
					phone: this.form[3].value, //手机号
					label: this.form[4].isLabel, //标签
				}
				this.$https({
					url: "/address/upById",
					method: "put",
					data: params,
					success: () => {
						this.form = this.$mConstDataConfig.userOperationMenu[1].form
						this.$openPage('userShippingAddressList')
					}
				})
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: $uni-bg-color;
	}

	.content {
		height: 100vh;
		background: $uni-bg-color;
	}

	.item:first-child {
		border: none;
	}

	.item {
		height: 96rpx;
		border-top: 2rpx solid rgba($color: #000000, $alpha: .03);

		.item-form {
			height: inherit;
			align-items: center;
			justify-content: space-between;

			.item-form-name {}

			.item-form-right {
				width: 72%;
				height: inherit;

				.input-view {
					height: inherit;

					.item-input {
						height: inherit;
						font-size: $uni-font-size-base;
					}
				}

				.item-form-label {
					font-size: $uni-font-size-sm;
					height: 45rpx;
					top: 0;
					bottom: 0;
					margin: auto;

					.label-item {
						border: 2rpx solid rgba($color: #000000, $alpha: .05);
						width: 112rpx;
						line-height: 40rpx;
						text-align: center;
						margin-right: 30rpx;
						border-radius: 10rpx;
					}

					.label-item:last-child {
						margin-right: 0;
					}
				}
			}
		}
	}

	.sex-select {
		height: inherit;
		justify-content: center;
		align-items: center;

		.iconfont {
			font-size: $uni-font-size-base;
			align-items: center;

			.sex-select-name {
				margin-left: 10rpx;
				font-size: $uni-font-size-tt;
				color: $uni-text-color;
			}
		}
	}

	.sex-select-item:last-child {
		margin-left: 100rpx;
	}
</style>